<template>
  <div class="equipment-break-down" id="equipment-break-down"></div>
</template>

<script>
import echarts from "echarts";
export default {
  name: "EquipmentBreakDown",
  props: {
    data: {
      type: Array,
      default: () => []
    }
  },
  mounted() {
    const dom = document.querySelector("#equipment-break-down");
    const myChart = echarts.init(dom);
    const data = this.data;
    const option = {
      title: {
        text: "设备故障率分布",
        subtext: `仅展示故障排行前${data.length}的设备`,
        textStyle: {
          color: "#fff",
          fontSize: 12
        },
        left: "50%",
        textAlign: "center"
      },
      legend: {
        show: true,
        type: "plain",
        right: 10,
        bottom: 0,
        width: "100%",
        itemWidth: 20,
        itemHeight: 10,
        data: data.map(item => item.name),
        textStyle: {
          color: "#fff"
        }
      },
      tooltip: {
        trigger: "item",

        formatter: function(p) {
          return p.name + ":" + p.value + "个";
        }
      },
      series: [
        {
          type: "pie",
          radius: ["0%", "75%"],
          center: ["150%", "55%"],
          data: data,
          roseType: "area",
          animation: true,
          left: 0,
          right: "66.6667%",
          top: 0,
          bottom: 0,
          label: {
            show: true,
            position: "outside",
            formatter: function(p) {
              return p.name;
            }
          }
        }
      ]
    };
    myChart.setOption(option);
  }
};
</script>

<style scoped lang="less">
.equipment-break-down {
  box-sizing: border-box;
  padding: 10px;
  width: 100%;
  height: 35.8vh;
  overflow: hidden;
}
</style>
